<template>
  <div id="maplayer">
    <div id="cesiumContainer"></div>

    <div class="logo" @click="backtofly">
      <img src="/static/Exhibition_img/logo.png" alt="" />
    </div>
    <div class="container" id="container">
      <info id="info" class="info"></info>
      <mynav id="mynav" class="mynav"></mynav>
      <small-map id="eye" :transPosition="transPosition" ></small-map><!--:mapFlag="mapFlag"-->
    </div>

    <div class="return" @click="returnback" :class="{ active: isact }">
      <!-- <img src="/static/Exhibition_img/return.png" /> -->
      <p>返回</p>
    </div>
    <bigimg :bigimgData="bigimgData"></bigimg>
    <div class="myanchor" id="floor" style="display: none">
      <span class="title">俱乐部</span>
      <a @click="changeFloor(3)"><img src="/static/Exhibition_img/3F.png" /></a>
      <a @click="changeFloor(2)"><img src="/static/Exhibition_img/2F.png" /></a>
      <a @click="changeFloor(1)"><img src="/static/Exhibition_img/1F.png" /></a>
    </div>
  </div>
</template>

<script>

import smallMap from '@/components/mycomponents/smallMap.vue'
import info from '@/components/mycomponents/info.vue'
import mynav from '@/components/mycomponents/nav.vue'
import bigimg from '@/components/mycomponents/bigimg.vue'
import axios from 'axios'
// import ViewShed from './mytools/ViewShed.js'
// import bill from './mytools/CesiumWallBillboard'

var flyEntity
// var interval
export default {
  name: 'show3D',
  data() {
    return {
      bigimgData: {},
      isact: false, //返回
      transPosition: [],
      // mydata: {
      //     point1F: [
      //         {
      //             position: [109.48760824118777, 18.26963231019887, 6],
      //         },
      //         {
      //             position: [109.48766301306662, 18.26970653035558, 6],
      //         },
      //         {
      //             position: [109.48776356151757, 18.26963028738969, 6],
      //         },
      //         {
      //             position: [109.48799519308028, 18.269428362529865, 6],
      //         },
      //         {
      //             position: [109.48782361639202, 18.269412097443613, 6],
      //         },
      //     ],
      //     point2F: [
      //         {
      //             position: [109.48760824118777, 18.26963231019887, 25],
      //         },
      //         {
      //             position: [109.48766301306662, 18.26970653035558, 25],
      //         },
      //         {
      //             position: [109.48776356151757, 18.26963028738969, 25],
      //         },
      //         {
      //             position: [109.48799519308028, 18.269428362529865, 25],
      //         },
      //         {
      //             position: [109.48782361639202, 18.269412097443613, 25],
      //         },
      //     ],
      //     point3F: [
      //         {
      //             position: [109.48762614411528, 18.269650486307043, 23],
      //         },
      //     ],
      // },
      mydata: {
        point: [
          {
            position: [109.48760824118777, 18.26963231019887, 6],
          },
          {
            position: [109.48766301306662, 18.26970653035558, 6],
          },
          {
            position: [109.48776356151757, 18.26963028738969, 6],
          },
          {
            position: [109.48799519308028, 18.269428362529865, 6],
          },
          {
            position: [109.48790800388409,18.269428995404816, 6],
          },
          {
            position: [109.48789085155329,18.26952975407871,6.66],
          },
          {
            position: [109.48772581197427,18.269568109036495,6],
          },
          // {
          //   position: [109.48776356151757, 18.26963028738969, 25],
          // },
          // {
          //   position: [109.48799519308028, 18.269428362529865, 25],
          // },
          // {
          //   position: [109.48782361639202, 18.269412097443613, 25],
          // },
          // {
          //   position: [109.48762614411528, 18.269650486307043, 23],
          // },
        ],
      },
      navFlyData:[
        {//玉盏
          position:[109.48785375669364,18.269452986868572,22],
          heading:40,
          pitch:-55
        },
        {//翰林轩
          position:[109.48785514813002,18.26945740899816,22],
          heading:-15,
          pitch:-55
        },
        {//吧台
          position:[109.48774268014715,18.269435012898644,18],
          heading:85,
          pitch:-45
        },
        {//钓鱼台
          position:[109.48785375669364,18.269452986868572,22],
          heading:25,
          pitch:-55
        },
        {//书房
          position:[109.48782465929457,18.269552576729975,30],
          heading:217,
          pitch:-55
        },
        {//俪人书苑
          position:[109.4878899182112,18.26942538155773,22],
          heading:135,
          pitch:-55
        },
        {//餐包
          position:[109.48787959793987,18.269425621790678,22],
          heading:40,
          pitch:-55
        },
        {//派对花园
          position:[109.4879331995237,18.269185451117767,18],
          heading:27,
          pitch:-30
        },
        {//会客室
          position:[109.48782465929457,18.269552576729975,30],
          heading:216,
          pitch:-55
        },
        {//雪茄吧
          position:[109.48785609293107,18.269452250223043,15],
          heading:-10,
          pitch:-45
        },
        {//紫玉
          position:[109.4878429686063,18.269492672812806,22],
          heading:-100,
          pitch:-60
        },
        {//茶室
          position:[109.48788902233959,18.26948650567541,30],
          heading:215,
          pitch:-55
        },
        {//舞台
          position:[109.48780928770135,18.269508721195702,18],
          heading:120,
          pitch:-45
        },
        {//客房
          position:[109.48781847613891,18.269437734840025,30],
          heading:50,
          pitch:-55
        },
        {//大会堂
          position:[109.48787991247883,18.269457213186094,28],
          heading:95,
          pitch:-55
        },
        {//沐香
          position:[109.4878429686063,18.269492672812806,22],
          heading:-100,
          pitch:-60
        },
        {//卡座
          position:[109.48786063708071,18.269437392322196,20],
          heading:50,
          pitch:-55
        },
      ],
      flyFlag: false,
      labelData:{
        F1:[
          {
            position:[109.48782209459642,18.269526207952303,10],
            text:'雪茄吧'
          },
          {
            position:[109.48790089972354,18.269505536467317,10],
            text:'卡座'
          },
          {
            position:[109.48788819614042,18.269475168796436,10],
            text:'舞台'
          },
          {
            position:[109.4878554304398,18.269436153373597,10],
            text:'吧台'
          },
        ],
        F2:[
          {
            position:[109.48779278914641,18.269446525403605,14],
            text:'紫玉莲香'
          },
          {
            position:[109.48776360269783,18.26947451947925,14],
            text:'沐香阁'
          },
          {
            position:[109.48781710866687,18.26951321594474,14],
            text:'翰林轩'
          },
          {
            position:[109.48786282633118,18.269538558318313,14],
            text:'钓鱼台'
          },
          {
            position:[109.48789920396327,18.269502849917018,14],
            text:'玉盏禅茶'
          },
          {
            position:[109.48796067677732,18.269292808506048,16],
            text:'派对花园'
          },
          {
            position:[109.48792723851442,18.269476304163458,14],
            text:'餐包'
          },
          {
            position:[109.48794583206849,18.26937431650338,14],
            text:'俪人书苑'
          },
        ],
        F3:[
          {
            position:[109.48796852987371,18.269441859408175,16],
            text:'大会堂'
          },
          {
            position:[109.48785964440397,18.26939231405648,20],
            text:'茶室'
          },
          {
            position:[109.48792778216271,18.269475480595364,16],
            text:'客房'
          },
          {
            position:[109.48782407842315,18.269422631115873,20],
            text:'茶室'
          },
          {
            position:[109.48779998696463,18.269447961418898,20],
            text:'会客室'
          },
          {
            position:[109.48777158942244,18.26947724444253,20],
            text:'书房'
          },
          {
            position:[109.48790296428504,18.26949869197599,16],
            text:'客房'
          },
          {
            position:[109.48787049120178,18.269526327996882,16],
            text:'客房'
          },
          {
            position:[109.48784521730828,18.269551651067527,16],
            text:'客房'
          },
          
          
          
        ]
      },
    }
  },
  components: {
    smallMap,
    info,
    mynav,
    bigimg,
  },

  methods: {
    //删除标签
    delLabel(){
       for(let i = 0;i<9;i++){
          window.viewer.entities.remove(window.viewer.entities.getById('labelF2'+i))
          window.viewer.entities.remove(window.viewer.entities.getById('labelF3'+i))
          window.viewer.entities.remove(window.viewer.entities.getById('labelF1'+i))
        }
    },
    //添加标签
    addLabel(num){
      if(num ==1){
       this.delLabel()
        this.labelData.F1.forEach((res,i)=>{
          window.viewer.entities.add({
            id:'labelF1'+i,
            position:new Cesium.Cartesian3.fromDegrees(res.position[0],res.position[1],res.position[2]),
            label:{
              text:res.text,
              scale:0.7,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              outlineColor:Cesium.Color.fromCssColorString('#497AC1'),
              outlineWidth:20,
            }
          })
        })
      }else if(num == 2){
        this.delLabel()
        this.labelData.F2.forEach((res,i)=>{
          window.viewer.entities.add({
            id:'labelF2'+i,
            position:new Cesium.Cartesian3.fromDegrees(res.position[0],res.position[1],res.position[2]),
            label:{
              text:res.text,
              scale:0.7,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              outlineColor:Cesium.Color.fromCssColorString('#497AC1'),
              outlineWidth:20,
            }
          })
        })
      }else if(num ==3){
        this.delLabel()
        this.labelData.F3.forEach((res,i)=>{
          window.viewer.entities.add({
            id:'labelF3'+i,
            position:new Cesium.Cartesian3.fromDegrees(res.position[0],res.position[1],res.position[2]),
            label:{
              text:res.text,
              scale:0.7,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              outlineColor:Cesium.Color.fromCssColorString('#497AC1'),
              outlineWidth:20,
            }
          })
        })
      }
      
      
    },
    //导航栏的点击事件
    navFly(floor,index){
      if(index<this.navFlyData.length){
      flyEntity = null
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
      viewer.clock.canAnimate = false
      viewer.clock.shouldAnimate = false

        this.changeFloor(floor)
        window.viewer.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(this.navFlyData[index].position[0],this.navFlyData[index].position[1],this.navFlyData[index].position[2]),
          orientation: {
            heading: Cesium.Math.toRadians(this.navFlyData[index].heading),
            pitch: Cesium.Math.toRadians(this.navFlyData[index].pitch),
            roll: 0.0,
          },
        })
      }
    },
    //侧边栏显示
    showSidebar() {
      var bar = document.getElementById('container')
      var floor = document.getElementById('floor')
      floor.style.left = 1.25 + 'rem'
      bar.style.right = 0
    }, //侧边栏隐藏
    hideSidebar() {
      var bar = document.getElementById('container')
      var floor = document.getElementById('floor')
      floor.style.left = -100 + '%'
      bar.style.right = -100 + '%'
    },
    // 点击logo返回飞行
    backtofly() {
      //  clearInterval(interval)//灯光
      //隐藏锚点
      document.getElementById('floor').style.display = 'none'
      this.delLabel()//删除标记
      this.changeFloor(99)//还原楼层
      this.allTimeFly()//飞
      
    },
    // 外场飞行
    allTimeFly() {
      window.viewer.dataSources.add(Cesium.CzmlDataSource.load('/static/json/path.json')).then((ds) => {
        flyEntity = ds.entities.getById('path')
        flyEntity.position.setInterpolationOptions({
          interpolationDegree: 5,
          interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
        })
        window.viewer.clock.shouldAnimate = true
        window.viewer.clock.canAnimate = true
        console.log(window.viewer.clock.currentTime)
        const target = new Cesium.Cartesian3.fromDegrees(109.48792273989099, 18.269519731300676, 100)
        this.flyFlag = true
        var _this = this
        function setRoamView() {
          if (flyEntity) {
            const center = flyEntity.position.getValue(window.viewer.clock.currentTime)
            var cartesian3 = new Cesium.Cartesian3(center.x, center.y, center.z)
            var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3)
            _this.transPosition = [
              Cesium.Math.toDegrees(cartographic.longitude),
              Cesium.Math.toDegrees(cartographic.latitude),
              window.viewer.camera.heading,
            ]
            if (center) {
              if (viewer.clock.currentTime.secondsOfDay <= 43394.05899999896) {
                const vector = new Cesium.Cartesian3(target.x - center.x, target.y - center.y, 9)
                viewer.camera.lookAt(center, vector)
              } else if (
                viewer.clock.currentTime.secondsOfDay > 43394.05899999896 &&
                viewer.clock.currentTime.secondsOfDay < 43570.06194999993
              ) {
                const target1 = new Cesium.Cartesian3.fromDegrees(109.48779639040296, 18.26897475733903, 10)
                const vector = new Cesium.Cartesian3(target1.x - center.x, target1.y - center.y - 37, 9)
                viewer.camera.lookAt(center, vector)
              } else if (
                viewer.clock.currentTime.secondsOfDay >= 43570.06194999993 &&
                viewer.clock.currentTime.secondsOfDay < 43710
              ) {
                const target2 = new Cesium.Cartesian3.fromDegrees(109.48760841384491, 18.269491015062282, 11)
                const vector = new Cesium.Cartesian3(target2.x - center.x, target2.y - center.y - 37, 9)
                viewer.camera.lookAt(center, vector)
              } else if (
                viewer.clock.currentTime.secondsOfDay >= 43710 &&
                viewer.clock.currentTime.secondsOfDay < 43850
              ) {
                viewer.camera.setView({
                  destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(cartographic.longitude),
                    Cesium.Math.toDegrees(cartographic.latitude),
                    26
                  ),
                  orientation: {
                    heading: Cesium.Math.toRadians((100 - viewer.clock.currentTime.secondsOfDay - 43710) * 2),
                    pitch: Cesium.Math.toRadians(-30),
                    roll: 0,
                  },
                })
              } else if (
                viewer.clock.currentTime.secondsOfDay >= 43850 &&
                viewer.clock.currentTime.secondsOfDay < 44140
              ) {
                viewer.camera.setView({
                  destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(cartographic.longitude),
                    Cesium.Math.toDegrees(cartographic.latitude),
                    7.3
                  ),
                  orientation: {
                    heading: Cesium.Math.toRadians((viewer.clock.currentTime.secondsOfDay - 43865) * 4 + 45),
                    pitch: Cesium.Math.toRadians(-15),
                    roll: 0,
                  },
                })
              } else if (
                viewer.clock.currentTime.secondsOfDay >= 44140 &&
                viewer.clock.currentTime.secondsOfDay < 44160
              ) {
                viewer.camera.setView({
                  destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(cartographic.longitude),
                    Cesium.Math.toDegrees(cartographic.latitude),
                    7.3 + (viewer.clock.currentTime.secondsOfDay - 44140) * 0.2
                  ),
                  orientation: {
                    heading: Cesium.Math.toRadians(135 + (viewer.clock.currentTime.secondsOfDay - 44140) * 10.5),
                    pitch: Cesium.Math.toRadians(0),
                    roll: 0,
                  },
                })
              } else if (viewer.clock.currentTime.secondsOfDay >= 44160) {
                if (viewer.clock.currentTime.secondsOfDay >= 44340 && viewer.clock.currentTime.secondsOfDay < 44370) {
                  viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(109.48779251323266, 18.269466585855962, 12),
                    orientation: {
                      heading: Cesium.Math.toRadians(145 + (viewer.clock.currentTime.secondsOfDay - 44340) * 2),
                      pitch: Cesium.Math.toRadians(-30),
                      roll: 0,
                    },
                  })
                } else if (
                  viewer.clock.currentTime.secondsOfDay >= 44373 &&
                  viewer.clock.currentTime.secondsOfDay < 44410
                ) {
                  viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(109.48778810428817, 18.269483437212727, 12),
                    orientation: {
                      heading: Cesium.Math.toRadians(145 + (viewer.clock.currentTime.secondsOfDay - 44340) * 2),
                      pitch: Cesium.Math.toRadians(-30),
                      roll: 0,
                    },
                  })
                } else if (
                  viewer.clock.currentTime.secondsOfDay >= 44435 &&
                  viewer.clock.currentTime.secondsOfDay < 44460
                ) {
                  viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(109.48782950270676, 18.269483470554754, 12),
                    orientation: {
                      heading: Cesium.Math.toRadians(141 + (viewer.clock.currentTime.secondsOfDay - 44340) * 2),
                      pitch: Cesium.Math.toRadians(-30),
                      roll: 0,
                    },
                  })
                } else if (
                  viewer.clock.currentTime.secondsOfDay >= 44465 &&
                  viewer.clock.currentTime.secondsOfDay < 44510
                ) {
                  viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(109.4878679224807, 18.269507378321777, 12),
                    orientation: {
                      heading: Cesium.Math.toRadians(-75 - (viewer.clock.currentTime.secondsOfDay - 44340) * 2),
                      pitch: Cesium.Math.toRadians(-30),
                      roll: 0,
                    },
                  })
                } else if (
                  viewer.clock.currentTime.secondsOfDay >= 44630 &&
                  viewer.clock.currentTime.secondsOfDay < 44660
                ) {
                  viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(109.48791252317078, 18.269473195108077, 12),
                    orientation: {
                      heading: Cesium.Math.toRadians(-35 - (viewer.clock.currentTime.secondsOfDay - 44340) * 2),
                      pitch: Cesium.Math.toRadians(-34),
                      roll: 0,
                    },
                  })
                } else {
                  viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(
                      Cesium.Math.toDegrees(cartographic.longitude),
                      Cesium.Math.toDegrees(cartographic.latitude),
                      11.3
                    ),
                    orientation: {
                      heading: Cesium.Math.toRadians(345 - (viewer.clock.currentTime.secondsOfDay - 44140) * 2),
                      pitch: Cesium.Math.toRadians(-5),
                      roll: 0,
                    },
                  })
                }
              }
            }
          }
        }
        viewer.scene.preUpdate.addEventListener(setRoamView)
      })
    },

    returnback() {
      //取消飞行
      flyEntity = null
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
      viewer.clock.canAnimate = false
      viewer.clock.shouldAnimate = false
      //取消灯光
      //  clearInterval(interval)
      this.delLabel()//删除标记
      this.changeFloor(99)//还原楼层
      // 返回更换背景
      this.isact = true
      //显示1秒就变回
      this.timer = setTimeout(() => {
        this.isact = false
      }, 500)
      this.flyFlag = false
      
      //隐藏锚点
      document.getElementById('floor').style.display = 'none'
      //设定视角
      window.viewer.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(109.48692789227333, 18.269292770389267, 110),
        orientation: {
          heading: Cesium.Math.toRadians(95),
          pitch: Cesium.Math.toRadians(-50),
          roll: 0.0,
        },
      })
    },
    // myChangeFloor(res, i) {
    //     let alp = 4
    //     let num = 0
    //     //删除
    //     window.viewer.entities.removeById('point' + i)
    //     //添加
    //     window.viewer.entities.add({
    //         id: 'point' + i,
    //         position: Cesium.Cartesian3.fromDegrees(res.position[0], res.position[1], res.position[2]),
    //         point: {
    //             show: true,
    //             color: Cesium.Color.fromCssColorString('#497AC1'),
    //             pixelSize: 22,
    //             outlineColor: Cesium.Color.fromCssColorString('#7D98CE'),
    //             // outlineWidth:3,
    //             outlineWidth: new Cesium.CallbackProperty(function () {
    //                 if (num % 2 === 0) {
    //                     alp -= 0.3
    //                 } else {
    //                     alp += 0.3
    //                 }

    //                 if (alp <= 3) {
    //                     num++
    //                 } else if (alp >= 8) {
    //                     num++
    //                 }
    //                 return alp
    //             }, false),
    //         },
    //     })
    // },
    changeFloor(n) {
      this.addLabel(n)
      if (n == 1) {
        console.log('1F')
        window.layers.forEach((res,i)=>{
          console.log(res);
          // if(i==15||i==7||i==6||i==5||i==4||i==3||i==2||i==1){
          if(i==15||i==7||i==6||i==5||i==4||i==2||i==1||i==0){

            res.visible = false
          }else{
            res.visible=true
          }
        })

      } else if (n == 2) {
        console.log('2F')
        window.layers.forEach((res,i)=>{
          if(i==15||i==7||i==6||i==5||i==4){
            res.visible = false
          }else{
            res.visible=true
          }
        })
      } else if(n == 3) {
        console.log('3F')
        window.layers.forEach((res,i)=>{
          if(i==15||i==6){
            res.visible = false
          }else{
            res.visible=true
          }
        })
      }else{
        window.layers.forEach((res)=>{
          res.visible =true
        })
      }
    },
  },
  beforeMount() {},
  mounted() {
    var viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false, //左下角的动画仪表盘
      baseLayerPicker: false, //右上角的图层选择按钮
      geocoder: false, //搜索框
      homeButton: false, //home按钮
      sceneModePicker: false, //模式切换按钮
      timeline: false, //底部的时间轴
      navigationHelpButton: false, //右上角的帮助按钮，
      fullscreenButton: false, //右下角的全屏按钮
      infoBox: false,
      selectionIndicator: false,
      zoomIndicatorContainer: false,
      navigation: false,
      // shadows: true,
    })
    window.viewer = viewer

    var scene = viewer.scene
    //隐藏底部logo
    viewer._cesiumWidget._creditContainer.style.display = 'none'
    //显示帧数
    // viewer.scene.debugShowFramesPerSecond = true;
    // viewer.extend(Cesium.viewerCesiumInspectorMixin)
    //移除默认的双击事件
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    //fxaa
    // viewer.scene.postProcessStages.fxaa.enabled = true;
    //深度检测
    // viewer.scene.globe.depthTestAgainstTerrain = true;

    var promise = viewer.scene.open(window._CONFIG['MJH'])
    Cesium.when(promise, (layers) => {
      console.log(layers);
      var listlayers = layers
      window.layers = layers
      listlayers.forEach((res, i) => {
        // res.selectedColor = Cesium.Color.CYAN
        res.selectedColor = ''
        // res.shadowType =  Cesium.ShadowType.SELECTION //Cesium.ShadowType.ALL
        //图层信息查询
        // var layername = res.name.split('@')
        // res.setQueryParameter({
        //   url: 'http://10.10.12.251:8090/iserver/services/data-ZhuLouQuYu/rest/data',
        //   dataSourceName: layername[1],
        //   dataSetName: layername[0],
        //   keyWord: 'SMID',
        // })
      })
    })

    // mapbox底图
    // var layer=new Cesium.MapboxStyleImageryProvider({
    //     url:'https://api.mapbox.com/styles/v1',
    //     username:'huacheng',
    //     styleId: 'ckijz3wgm0gka17qsdjbhd8ie',
    //     accessToken: 'pk.eyJ1IjoiaHVhY2hlbmciLCJhIjoiY2toem5jZGR3MW5hczJybnR1NHRqNGZlOCJ9.prwTs_ZwOpjgesjeGzMa2g',
    //     scaleFactor:true
    // });

    // viewer.imageryLayers.addImageryProvider(layer);

    //鼠标单击事件
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
    handler.setInputAction(function (e) {
      //获取点击位置笛卡尔坐标
      var position = scene.pickPosition(e.position)
      // 选中图层
      let selectlayer = viewer.scene.layers.getSelectedLayer()
      console.log(selectlayer)
      //  选取实体类
      var pointDraged = viewer.scene.pick(e.position)
      //点击展会和舞台
      if (pointDraged) {
        console.log(pointDraged);
        // 在点击事件触发之前先取消追踪，不然flyto会飞到外太空
        // if(pointDraged.id.id){
        // flyEntity = null
        // viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
        // viewer.clock.canAnimate = false
        // viewer.clock.shouldAnimate = false
        // }
        
        switch (pointDraged.id.id) {
          case '会展':
            flyEntity = null
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
            viewer.clock.canAnimate = false 
            viewer.clock.shouldAnimate = false
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.48735225703238, 18.26935020227026, 58),
              orientation: {
                heading: Cesium.Math.toRadians(70.5), // 方向
                pitch: Cesium.Math.toRadians(-40), // 倾斜角度
                roll: 0.0,
              },
              duration: 2,
            })
            document.getElementById('floor').style.display = 'grid'
            _this.flyFlag = false
            // viewer.entities.removeById('point'+i)
            
            break
          case '舞台':
            flyEntity = null
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
            viewer.clock.canAnimate = false 
            viewer.clock.shouldAnimate = false

            // function setcolor() {
            //   var x = Math.ceil(Math.random() * 256 - 1) / 255
            //   var y = Math.ceil(Math.random() * 256 - 1) / 255
            //   var z = Math.ceil(Math.random() * 256 - 1) / 255
            //   var position = new Cesium.Cartesian3.fromDegrees(109.4878771636859, 18.26896421819868, 11)
              
            //   var options = {
            //     color: new Cesium.Color(x, y, z),
            //     cutoffDistance: 9,
            //     decay: 0.6,
            //     intensity: 4,
            //   }
            //   console.log(options)
            //   var pointLight = new Cesium.PointLight(position, options)
            //   scene.addLightSource(pointLight)
            //   setTimeout(() => {
            //     scene.removeLightSource(pointLight)
            //   }, 900)
            // }
            // interval = setInterval(() => {
            //   setTimeout(setcolor, 0)
            // }, 1000)

            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.48748976362428, 18.269326176435623, 16),
              orientation: {
                heading: Cesium.Math.toRadians(138), // 方向
                pitch: Cesium.Math.toRadians(-18), // 倾斜角度
                roll: 0.0,
              },
              duration: 2,
            })
            _this.flyFlag = false
            break
          default:
            
            if (pointDraged.id.id<99) {
              flyEntity = null
              viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
              viewer.clock.canAnimate = false 
              viewer.clock.shouldAnimate = false
              //隐藏侧边栏
              _this.hideSidebar()
              _this.axios
                .get('/ltmjh/goods/findGoodsById', {
                  params: {
                    id: pointDraged.id.id,
                  },
                })
                .then((res) => {
                  console.log(res)
                  _this.bigimgData = res.result
                })
            }
        }
      }

      //将笛卡尔坐标转化为经纬度坐标------打印经纬度--后期不用可删除。
      var cartographic = Cesium.Cartographic.fromCartesian(position)
      var longitude = Cesium.Math.toDegrees(cartographic.longitude)
      var latitude = Cesium.Math.toDegrees(cartographic.latitude)
      var height = cartographic.height
      if (height < 0) {
        height = 0
      }
      console.log(longitude + ',' + latitude + ',' + height)
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    //注册鼠标点击事件----此方法获取要素集（须先查询data）
    // viewer.pickEvent.addEventListener(function (feature) {
    //   console.log(feature)
    // })

    //监听相机改变事件并传值给组件
    var _this = this
    viewer.scene.camera.changed.addEventListener(function () {
      if (!_this.flyFlag) {
        var position = viewer.camera.position
        var cartographic = Cesium.Cartographic.fromCartesian(position)
        var arr = [
          Cesium.Math.toDegrees(cartographic.longitude),
          Cesium.Math.toDegrees(cartographic.latitude),
          viewer.camera.heading,
        ]
        _this.transPosition = arr
      }
    })

    var time = 14
    var time1 = 26
    var num = 0
    viewer.entities.add({
      position: new Cesium.CallbackProperty(function () {
        if (num % 2 === 0) {
          time1 -= 0.04
        } else {
          time1 += 0.04
        }

        if (time1 < 26) {
          num++
        } else if (time1 >= 28) {
          num++
        }
        return Cesium.Cartesian3.fromDegrees(109.48775667674967, 18.269528082336798, time1)
      }, false),
      billboard: {
        image: '/static/img/zt.png',
        scale: 0.5,
        // width: 200,
        // height: 80,
        disableDepthTestDistance: Number.POSITIVE_INFINITY, //不被遮挡
        //可视距离范围
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(57, 210),
      },
      name: '会展',
      id: '会展',
    })
    viewer.entities.add({
      // position: Cesium.Cartesian3.fromDegrees(109.48780415974932, 18.269046530572496, 14),
      position: new Cesium.CallbackProperty(function () {
        if (num % 2 === 0) {
          time -= 0.03
        } else {
          time += 0.03
        }

        if (time < 14) {
          num++
        } else if (time >= 16) {
          num++
        }
        return Cesium.Cartesian3.fromDegrees(109.48780415974932, 18.269046530572496, time)
      }, false),
      billboard: {
        image: '/static/img/wt.png',
        scale: 0.5,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(50, 210),
      },
      name: '舞台',
      id: '舞台',
    })

    //添加
    var alp = 4
    var num1 = 0
    this.mydata.point.forEach((res, i) => {
      viewer.entities.add({
        id: i,
        position: Cesium.Cartesian3.fromDegrees(res.position[0], res.position[1], res.position[2]),
        point: {
          show: true,
          color: Cesium.Color.fromCssColorString('#497AC1'),
          pixelSize: 22,
          outlineColor: Cesium.Color.fromCssColorString('#7D98CE'),
          // outlineWidth:3,
          outlineWidth: new Cesium.CallbackProperty(function () {
            if (num1 % 2 === 0) {
              alp -= 0.03
            } else {
              alp += 0.03
            }

            if (alp <= 3) {
              num1++
            } else if (alp >= 8) {
              num1++
            }
            return alp
          }, false),
        },
      })
    })

    this.timer = setTimeout(() => {
      //设置延迟执行
      this.allTimeFly()
      // this.navFly(1,0)
    }, 5000)

    // //添加白模
    // var tileset = viewer.scene.primitives.add(
    //   new Cesium.Cesium3DTileset({
    //     url: '/static/bul/tileset.json',
    //     // url: 'http://data.marsgis.cn/3dtiles/qx-changfang/tileset.json'
    //   })
    // )
    // tileset.readyPromise.then(function (tileset) {
    //   viewer.scene.primitives.add(tileset)
    //   var heightOffset = 2000.0 //高度
    //   var boundingSphere = tileset.boundingSphere

    //   //Cesium.Cartographic.fromCartesian (cartesian, ellipsoid , result )
    //   var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
    //   var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)

    //   //Cesium.Cartesian3.fromRadians (longitude, latitude, height , ellipsoid , result )
    //   var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset)

    //   //Cesium.Cartesian3.subtract (left, right, result)
    //   var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
    //   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
    //   // viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0))

    //   var boundingSphere = tileset.boundingSphere;
    //   viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
    //   viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);


    //   tileset.style = new Cesium.Cesium3DTileStyle({
    //     color: {
    //       conditions: [
    //         ['true', 'rgba(0, 127.5, 255 ,0.8)']//'rgb(127, 59, 8)']
    //         // ['true', 'rgba(127,59,8 ,0.5)']
            
    //       ]
    //     }
    //   });

      // tileset.tileVisible.addEventListener(function (tile) {
      //   var content = tile.content;
      //   var featuresLength = content.featuresLength;
      //   for (var i = 0; i < featuresLength; i += 2) {
      //     let feature = content.getFeature(i)
      //     let model = feature.content._model

      //     if (model && model._sourcePrograms && model._rendererResources) {
      //       Object.keys(model._sourcePrograms).forEach(key => {
      //         let program = model._sourcePrograms[key]
      //         let fragmentShader = model._rendererResources.sourceShaders[program.fragmentShader];
      //         let v_position = "";
      //         if (fragmentShader.indexOf(" v_positionEC;") != -1) {
      //           v_position = "v_positionEC";
      //         } else if (fragmentShader.indexOf(" v_pos;") != -1) {
      //           v_position = "v_pos";
      //         }
      //         const color = `vec4(${feature.color.toString()})`;

      //         model._rendererResources.sourceShaders[program.fragmentShader] =
      //           "varying vec3 " + v_position + ";\n" +
      //           "void main(void){\n" +
      //           "    vec4 position = czm_inverseModelView * vec4(" + v_position + ",1);\n" +
      //           "    float glowRange = 360.0;\n" +
      //           "    gl_FragColor = "+color+";\n"+
      //           // "    gl_FragColor = vec4(0.2,  0.5, 1.0, 1.0);\n" +
      //           "    gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0);\n" +
      //           "    float time = fract(czm_frameNumber / 300.0);\n" +//线框浮动速度
      //           "    time = abs(time - 0.5) * 2.0;\n" +
      //           "    float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));\n" +
      //           "    gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);\n" +
      //           "}\n"
      //       })
      //       model._shouldRegenerateShaders = true
      //     }
      //   }
      // });
    // })
    // viewer.flyTo(tileset)
    

    //可视域测试
    // ViewShed.constructor(viewer,Cesium.Cartesian3.fromDegrees(109.4876814623734,18.269523166575887,18.976670365539256))
    // new ViewShed(viewer,
    // {
    //   viewPosition:Cesium.Cartesian3.fromDegrees(109.48749664578666,18.26896884871692,43.497501593207446),
    //   // visibleAreaColor:Cesium.Color.RED
    //   // viewDistance:200,
    //   // horizontalViewAngle:30,
    //   // verticalViewAngle:30
    //   })
 

  },
}
</script>

<style lang="less" scoped>
html {
  font-size: 16px !important;
}
#maplayer {
  width: 100%;
  height: 100%;
  position: fixed;
  .logo {
    position: fixed;
    top: 20px;
    left: 20px;
    img {
      width: 100%;
    }
  }

  .return {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-image: url('/static/Exhibition_img/return.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    p {
      color: #eee;
      font-size: 16px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .active {
    background-image: url('/static/Exhibition_img/active_return.png');
  }
  #cesiumContainer {
    height: 100%;
    width: 100%;
  }
  .myanchor {
    position: absolute;
    z-index: 999;
    top: 40%;
    left: 1.25rem;
    color: #212121;
    line-height: 1.25rem;
    padding: 0px 0.625rem;
    text-align: center;
    background: rgba(34, 23, 56, 0.6);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 0.75rem;
    transition: all 1s;
    .title {
      font-size: 1rem;
      color: #fff;
      padding: 1.25rem 0;
    }
    a {
      color: #fff;
      margin: 0.625rem 0px;
    }
  }
  .container {
    width: 30rem;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    align-content: flex-start;
    transition: all 1s;
    #info,
    #mynav {
      width: 26.3rem;
      height: 33.3%;
      background: rgba(34, 23, 56, 0.6);
      position: relative;
      align-self: flex-end;
    }
    #eye {
      width: 26.3rem;
      flex: 1;
      align-self: flex-end;
      position: relative;
    }
  }
}
</style>